<template>
  <div class="home">
    <h1>行程调查表</h1>
    <el-form :model="form" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="到达地">
        <el-radio-group v-model="form.address">
          <el-radio label="昌平" />
          <el-radio label="西安" />
          <el-radio label="海淀" />
          <el-radio label="无" />
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="time" label="日期" />
      <el-table-column prop="address" label="风险地" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{ $index }">
          <el-button text size="small" @click="delect($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <section>
      <span v-for="(item, index) in list" :key="index">
        {{ item.name }}:{{ item.val }}
      </span>
    </section>
  </div>
</template>

<script>
// @ is an alias to /src
import { reactive, computed } from "vue";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "HomeView",
  components: {},
  setup(props) {
    const { commit, state, getters } = useStore();
    const form = reactive({
      name: "",
      phone: "",
      address: "无",
    });
    const tableData = computed(() => state.addressList);
    const list = computed(() => getters.list);
    const onSubmit = () => {
      // 提交的函数
      commit("save", form);
      form.name = "";
      form.phone = "";
    };
    const delect = (i) => {
      // 删除的函数
      ElMessageBox.confirm("是否确定要删除该数据！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          commit("del", i);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除！",
          });
        });
    };
    return {
      form,
      onSubmit,
      tableData,
      delect,
      list,
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 70%;
  margin: 50px auto;
  text-align: center;
}
section {
  display: flex;
  justify-content: space-around;
}
</style>
